<template>
    <div class="main-e">
      <div style="border-bottom: 3px solid skyblue;"></div>
    <el-container style="">
    <el-container>
        
        <el-main>
         <el-row>
            <el-col :span="12" v-for="(item, index) in dataList" :key="index" >
                
                <el-card :body-style="{ padding: '0px' }" class="block" shadow="hover" @click.native="Expdetail(item)" style="cursor: pointer">
                <el-container>
                  <el-aside style="width:220px">
                    <img :src="item.expimg_url" class="image">
                  </el-aside>
                  <el-main class="EMain">
                    <el-container>
                      <el-header style="margin-top:3%;text-align:left;font-size: 24px;">
                        <el-row >
                          <el-col :span="24"><span>{{item.expname}}</span></el-col>
                        </el-row>
                      </el-header>
                      <el-main style="text-align: left; font-size: 12px;height:50px">
                        <el-row>
                          <el-col :span="24" ><span style="white-space:normal;line-height:10px">{{item.expinstitutional_units}}</span></el-col>
                        </el-row>
                      </el-main>
                      <el-footer style="text-align: left; font-size: 13px;">
                        <el-row>
                          <el-col :span="24" ><div class="grid-content bg-purple"></div><span style="line-height:40px">{{item.expclass}}</span></el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="24" ><div class="grid-content bg-purple"></div><span style="line-height:30px">{{item.expdomain}}</span></el-col>
                        </el-row>
                      </el-footer>
                    </el-container>
                  </el-main>
                </el-container>
                </el-card>

            </el-col>
            </el-row>
        </el-main>
        <el-footer style="margin-bottom:30px">
          <div class="blockpage">
              <sand-tachievements-grouppage ref="STAtotal" @getcurrentPage="getpage" @getpageSize="getpagesize"></sand-tachievements-grouppage>
            </div>
        </el-footer>
    </el-container>
    
    </el-container>
    </div>
</template>
<script>
import SandTachievementsGrouppage from "../SandTAchievementsGroup/SandTachievementsGrouppage.vue"
  export default {
    name:"ETGroupA",
    data () {
    return {
      
      searchInput : "",
      // search:"",
      currentPage:1,
      pageSize:10,
      fid:"不限",
      inid:"不限",
      pid:"不限",
      expname:"",
      exptype:"",
      expident:"",
      expfield:"",
      expindu:"",
      exppicurl:"",
      expserve:"",
      dataList:"",
    }
  },
  created(){
    this.$bus.$on('fielddate',fid=>{
      this.fid=fid;
      console.log(this.fid);
    })
    this.$bus.$on('indudate',inid=>{
      this.inid=inid;
      console.log("#",this.inid);
    })
    this.$bus.$on('belongsdate',bid=>{
      this.bid=bid;
      console.log("##",this.bid);
    })
    this.$bus.$on('getsearch',search=>{
      this.searchInput=search;
      console.log("##",this.searchInput);
    })
    this.getexp(this.fid,this.inid,this.bid,this.search,this.pageSize,this.currentPage);
  },
  methods: {
    getpage(p){
      console.log("当前页：",p)
      this.currentPage=p;
    },
    getpagesize(p){
      console.log("页大小：",p)
      this.pageSize=p;
    },
    Expdetail(item){
      this.$router.push({path:'/ExpertsDetail',
      query: {
        expname:item.expname,//名字
        exptype:item.exptype,//专家类型
        expfield:item.expdomain,//领域
        expindu:item.expclass,//行业
        exppicurl:item.expimg_url,//图片
        expident:item.expinstitutional_units,//身份
        expmail:item.expcontact,//邮箱
        expinfo:item.exppersonal_details,//介绍信息
        expach:item. exptechnological_achievements,//成果信息
        expcount:item.expcount,//成果累计
        expserve:item.expresearch_interests,//服务意愿
      }
      });
    },
    getexp(fid,inid,bid,searchInput,pageSize,currentPage){
      let params={
        // achfield:fid,
        // achindu:inid,
        // achcenter:bid,
        // searchInput:searchInput,
        pageSize:pageSize,
        currentPage:currentPage
      }
      console.log("###",params);
      this.api.getexp(params).then(res => {
        let {code, message, data} = res;
        if(['200', 200].includes(code) && res.success == true) {
          console.log("专家：",res.total,data);
          this.$refs.STAtotal.sendtotal(res.total);
          this.dataList = data;
        }
        else {
            this.$message({
                type: "info",
                message: message
            })
        }
      }).catch(err => {
          this.$message({
              type: "info",
              message: err
          })
      })
    },
    handleSearch(){
      // console.log("!!!!",e.data);
      this.search=this.searchInput;
    },
    },
    components:{
      SandTachievementsGrouppage,
    },
    watch:{
    bid:{
      handler(newVal,oldVal){
      // this.$bus.$on('belongsdate',bid=>{
      // this.bid=bid;
      // console.log(this.bid);
      // })
        this.getexp(this.fid,this.inid,newVal,this.search,this.pageSize,this.currentPage)
      }
    },
    fid:{
      handler(newVal,oldVal){
        // this.$bus.$on('fielddate',fid=>{
        // this.fid=fid;
        // console.log("#",this.fid);
        // })
        this.getexp(newVal,this.inid,this.bid,this.search,this.pageSize,this.currentPage)
      }
    },
    inid:{
      handler(newVal,oldVal){
      //   this.$bus.$on('indudate',inid=>{
      //   this.inid=inid;
      //   console.log("##",this.inid);
      // })
        this.getexp(this.fid,newVal,this.bid,this.search,this.pageSize,this.currentPage)
      }
    },
    search:{
      handler(newVal,oldVal){
        this.getexp(this.fid,this.inid,this.bid,newVal,this.pageSize,this.currentPage)
      }
    },
    currentPage:{
      handler(newVal,oldVal){
        this.getexp(this.fid,this.inid,this.bid,this.search,this.pageSize,newVal)
      }
    }
  }
  };
</script>
<style scoped>
  .EMain{
    height:210px;
  }
  .block{
      margin-left: 5%;
      margin-top: 5%;
      width: 450px;
      height: 200px;
      /* margin-bottom: 5%; */
      border-color: rgb(220, 252, 250);
  }
  .image {
    width: 200px;
    height: 200px;
    margin-left: 0%;
    display: block;
  }

  
  .main-e{
      width: 1180px;
      margin-left: auto;
      margin-right: auto;
  }
</style>

